<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="../lib/vue.js"></script>
</head>
<style>
    tr td{
      border:1px solid #333;
      padding:20px;
      text-align: center;
    }
    table{
      width:50%;
      background: orange;
      margin-top:20px;
    }

   
    ul{
      display: flex;
      padding:10px;
      background: pink;
      width:70%;
      list-style: none;
      }
      li{
          margin:0 10px;
          flex:1;
          padding:20px;
      }

      .zoom-enter-active{
        animation: zoomInDown .8s both;
      }

      .zoom-leave-active{
        animation: zoomOutDown 0.5s both;
      }
</style>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- 这里将toggle设置成v-if显示隐藏 通过点击按钮来切换q -->

        <!-- <mytable v-show='toggle' :cars='cars'></mytable>
        <mylist v-show='!toggle' :cars='cars'></mylist>
        <button @click="toggle=!toggle">{{toggle?"表格展示":"列表展示"}}</button> -->


        <!-- 这里是通过value来改变cotId的值来切换 用v-model双向绑定切换 -->
        <select v-model='cptId'>
            <option value="mytable">表格展示</option>
            <option value="mylist">列表展示</option>
        </select>
        
        <transition name='zoom' mode='out-in'>
            <!-- 将下面的component放在这里面就能实现动画的切换 -->


            <!-- 这里的keep-alive是缓存失活的组件 避免重复生成浪费内存 提升性能优化-->
            <keep-alive>
            <component :is="cptId" :cars='cars'></component>
            </keep-alive>


        </transition>
        <!-- <component :is="cptId" :cars='cars'></component> -->
    </div>
    
    <template id="mytable">  
        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>品牌</td>
                    <td>颜色</td>
                    <td>型号</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(car,key,index) in cars" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{car.brand}}</td>
                    <td>{{car.color}}</td>
                    <td>{{car.model}}</td>
                </tr>
            </tbody>
        </table>
    </template>

    <template id="mylist">
        <ul>
            <li v-for="(car,key,index) in cars" :key="index">
                <p>序号{{index+1}}</p>
                <p>品牌{{car.brand}}</p>
                <p>颜色{{car.color}}</p>
                <p>型号{{car.model}}</p>
            </li>
        </ul>
    </template>




    <script>




        Vue.component('mytable',{
            template: '#mytable',
            props:['cars'],


            // 这里可以判断执行到哪一步
            mounted(){
                console.log('我被新建了')
            },
            activated() {
                console.log('激活')
            },
            deactivated() {
                console.log('失活')
            },
            
        });
        Vue.component('mylist',{
            template: '#mylist',
            props:['cars']
        });
        var cars = {
            car01: { brand: "Ford", model: "Mustang", color: "red" },
            car02: { brand: "Fiat", model: "500", color: "white" },
            car03: { brand: "Volvo", model: "XC90", color: "black" }
        }



        
        // 根实例 根组件
        const vm = new Vue({
            data: {
                title: "Vue 组件 动态组件切换     ",
                word: 'wh2110-daydayup',
                cars,
                toggle: true,
                cptId: "mytable"
            },
            mounted() {
                document.getElementsByTagName("title")[0].innerHTML = this.title;
            }
        }).$mount("#app")
    </script>
    <!-- 
        component 官方组件
        is 属性   表示当前显示的组件 组件名称
        keep-alive  (记录滑动的高度)   失活的组件将会被缓存！   下一次失活组件重新激活的时候 会直接调用缓存数据  性能优化

        activated   激活
        deactivated 失活  

        transition 过渡组件 

        组件切换
        1. v-if
        2. v-show 
        3. component
        4. 路由 route 
     -->
</body>

</html>